<template>
  <header>
    <div class="container1">
      <div class="loge">
        <img src="../assets/logo.png" />
      </div>
      <div class="search">
        <i class="el-icon-search"></i>
        <input class="input" type="text" v-model="value" />
        <span class="span" @click="gosearch()">搜索</span>
      </div>
      <div class="xt">
        <dd>
          <i class="el-icon-upload" />
          上传
        </dd>
        <dd>
          <i class="el-icon-question" />
          提问
        </dd>
        <template v-if="!uname">
          <dd @click="gologin">
            <i class="el-icon-user" />
            登录
          </dd>
          <dd @click="goregiste">
            <i class="el-icon-edit-outline" />
            注册
          </dd>
        </template>
        <template v-else>
          <dd class="userover">
            <i class="el-icon-user" />
            {{ $store.state.uname }}
          </dd>
          <dd @click="out">
            <i class="el-icon-edit-outline" />
            退出
          </dd>
        </template>
      </div>
    </div>
    <div class="container2">
      <div class="dh">
        <router-link to="/index/sy"><dd :class="`${$route.params.type=='sy'?'active':''}`">首页</dd></router-link>
        <router-link to="/caipu/cp"><dd :class="`${$route.params.type=='cp'?'active':''}`">菜谱大全</dd></router-link>
        <router-link to="/jiachang/jc"><dd :class="`${$route.params.type=='jc'?'active':''}`">家常菜谱</dd></router-link>
        <router-link to="/daohang/wd/1"><dd :class="`${$route.params.type=='wd'?'active':''}`">美食问答</dd></router-link>
        <router-link to="/one/sp"><dd :class="`${$route.params.type=='sp'?'active':''}`">食谱分类</dd></router-link>
        <router-link to="/jksl/sl"><dd :class="`${$route.params.type=='sl'?'active':''}`">健康食疗</dd></router-link>
        <router-link to="/cyph/ph/1"><dd :class="`${$route.params.type=='ph'?'active':''}`">厨友排行</dd></router-link>
        <router-link to="/yhss/ss"><dd :class="`${$route.params.type=='ss'?'active':''}`">用户搜索</dd></router-link>
        <router-link to=""><dd :class="`${$route.params.type==''?'active':''}`">公告</dd></router-link>
        <router-link to=""><dd :class="`${$route.params.type==''?'active':''}`">专题</dd></router-link>
      </div>
    </div>
  </header>
</template>

<script>
import { mapMutations, mapState } from "vuex";

export default {
  data() {
    return {
      data: null,
      value: " "
    };
  },  
  mounted(){
    this.$router.push("/index/sy");
  },
  computed: {
    ...mapState(["uname"]),
  },
  methods: {
    ...mapMutations(["updateUname"]),

    beclick() {},
    gologin() {
      if (this.$route.path != "/login") {
        this.$router.push("/login");
      }
    },
    goregiste() {
      if (this.$route.path != "/registe") {
        this.$router.push("/registe");
      }
    },
    out() {
      sessionStorage.removeItem("name");
      this.$store.state.uname = sessionStorage.getItem("name");
    },
    gosearch(){
      this.$router.push(`/search/${this.value}/1`);
      this.value = " "
    }
  },
};
</script>

<style scoped>
.userover {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  width: 60px;
}
a {
  text-decoration: none;
}
router-link {
  text-decoration: none;
}
.container1 {
  display: flex;
  height: 70px;
  width: 900px;
  margin: 0 auto;
}
.container2 {
  display: flex;
  height: 40px;
  width: 100%;
  margin: 30px auto;
  background-color: #fa7e3e;
}
.logo {
  width: 100px;
  height: 50px;
}
img {
  width: 150px;
  height: 80px;
}
img:hover {
  cursor: pointer;
}
.search {
  height: 40px;
  width: 380px;
  margin-top: 15px;
  margin-left: 20px;
  border: 1px solid rgb(181, 181, 181);
  background: linear-gradient(to right, white 50%, #fa7e3e 0);
}
.search i {
  margin-left: 5px;
  cursor: pointer;
}
.input {
  position: relative;
  height: 38px;
  width: 300px;
  border: 1px solid rgb(181, 181, 181);
  border-left: currentColor;
  margin-left: 5px;
  top: -1px;
}
.span {
  background-color: #fa7e3e;
  text-align: center;
  width: 40px;
  margin-left: 10px;
}
.span:hover {
  cursor: pointer;
}
i {
  color: rgb(177, 163, 146);
}
.xt {
  display: flex;
  margin-top: 25px;
}
.xt dd {
  margin-left: 30px;
  height: 30px;
}
.xt dd:hover {
  color: #fa7e3e;
  cursor: pointer;
}
.xt dd:hover i {
  color: #fa7e3e;
  cursor: pointer;
}
.dh {
  display: flex;
  margin: 5px auto;
}
.dh dd {
  margin-left: 10px;
  color: white;
  height: 40px;
  width: 90px;
  text-align: center;
  line-height: 30px;
}
.dh dd:hover {
  cursor: pointer;
  background-color: #fff;
  color: #fa7e3e;
}
.dh .active{
  cursor: pointer;
  background-color: #fff;
  color: #fa7e3e;
}
</style>>

